<template>
  <!-- <div class="app-container"> -->
    <div class="container-bg">
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="form"
          :rules="rules"
          size="medium"
          label-width="150px"
          style="max-width: 1200px"
        >
          <el-col :span="24">
            <el-form-item label="DHCP">
              <el-switch
                v-model="form.ipv4.sV4Method"
                active-value="dhcp"
                inactive-value="manual"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备IPv4地址" prop="ipv4.sV4Address">
              <el-input
                v-model="form.ipv4.sV4Address"
                placeholder="请输入设备IPv4地址"
                clearable
                :style="{ width: '100%' }"
                :disabled="form.ipv4.sV4Method != 'manual'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="MAC地址">
              <el-input
                v-model="form.link.sAddress"
                placeholder="请输入MAC地址"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="IPv4子网掩码" prop="ipv4.sV4Netmask">
              <el-input
                v-model="form.ipv4.sV4Netmask"
                placeholder="请输入IPv4子网掩码"
                clearable
                :style="{ width: '100%' }"
                :disabled="form.ipv4.sV4Method != 'manual'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首选DNS服务器" prop="link.sDNS1">
              <el-input
                v-model="form.link.sDNS1"
                placeholder="请输入首选DNS服务器"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="IPv4默认网关" prop="ipv4.sV4Gateway">
              <el-input
                v-model="form.ipv4.sV4Gateway"
                placeholder="请输入IPv4默认网关"
                clearable
                :style="{ width: '100%' }"
                :disabled="form.ipv4.sV4Method != 'manual'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="false">
            <el-form-item label="备选DNS服务器" prop="link.sDNS2">
              <el-input
                v-model="form.link.sDNS2"
                placeholder="请输入备选DNS服务器"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-button
                type="primary"
                size="medium"
                style="width: 120px"
                @click="submitForm('elForm')"
              >
                保存
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div>
        <span style="color: #f00">*</span>
        <!--        <span style="color: #0000ff">&nbsp;注意：修改可能导致登录过期！</span>-->
        <span style="color: #0000ff">&nbsp;注意：修改后请关闭浏览器重新登录！</span>
      </div>
    </div>
  <!-- </div> -->
</template>

<script>
import {getNetworLanApi, editNetworLanApi} from "@/api/network";
import { Loading } from 'element-ui'
let loading;

export default {
  props: {},
  data() {
    return {
      loading: false,
      formPrev: {},
      form: {
        ipv4: {
          sV4Address: "",
          sV4Gateway: "",
          sV4Method: "",
          sV4Netmask: "",
        },
        link: {
          iDuplex: "",
          iNicSpeed: "",
          iPower: "",
          sAddress: "",
          sDNS1: "",
          sDNS2: "",
          sInterface: "",
          sNicSpeed: "",
          sNicSpeedSupport: "",
        },
      },
      rules: {
        "ipv4.sV4Address": [
          {required: true, trigger: "blur", message: "不能为空"},
          {
            pattern:
              /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
            message: "请输入正确的格式",
            trigger: "blur",
          },
        ],
        "link.sDNS1": [
          // { required: true, trigger: "blur", message: "不能为空" },
          {
            pattern:
              /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
            message: "请输入正确的格式",
            trigger: "blur",
          },
        ],
        "ipv4.sV4Gateway": [
          {required: true, trigger: "blur", message: "不能为空"},
          {
            pattern:
              /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
            message: "请输入正确的格式",
            trigger: "blur",
          },
        ],
        "link.sDNS2": [
          // { required: true, trigger: "blur", message: "不能为空" },
          {
            pattern:
              /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
            message: "请输入正确的格式",
            trigger: "blur",
          },
        ],
        "ipv4.sV4Netmask": [
          {required: true, trigger: "blur", message: "不能为空"},
          {
            pattern:
              /^((128|192)|2(24|4[08]|5[245]))(\.(0|(128|192)|2((24)|(4[08])|(5[245])))){3}$/,
            message: "请输入正确的格式",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getNetworLan();
  },
  mounted() {
  },
  methods: {
    startLoading() {
      this.loading= Loading.service({
        lock:true,
        text:"",
        background:'rgba(0,0,0,0.3)',
      })
    },
    endLoading() {
      this.loading.close();
    },
    getNetworLan() {
      getNetworLanApi().then((res) => {
        // console.log(res);
        this.form = {...res};
        this.getForm = {...res};
        this.formPrev = JSON.parse(JSON.stringify(this.form));
        // console.log(200, this.formPrev);
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.startLoading();
          console.log(244, this.form);
          console.log(245, this.formPrev);
          editNetworLanApi(this.form).then((res) => {
            if (JSON.stringify(this.formPrev) === JSON.stringify(this.form)) {
              this.$message.success("保存成功");
              this.endLoading();
            } else {
              this.$message.success("保存成功");
              if (this.form.ipv4.sV4Method != 'dhcp') {
                this.loading.setText('修改IP中，请耐心等待');
              }
              setTimeout(() => {
                let newIP = this.form.ipv4.sV4Address;
                window.location.href = window.location.protocol + '//' + newIP + '/index';
                endLoading();
              }, 10000);
            }
          }).catch(err => {
            this.$message.error(err)
            this.endLoading();
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-loading-mask {
  margin-top: 40%;
}
</style>
